<template>
	<view class="page" v-cloak>
		<!-- 自定义头部start -->
		<!-- <view class="cu-custom">
			<view class="cu-bar fixed" :style="[
					{
						height: CustomBar + 'px',
						paddingTop: StatusBar + 'px',
						backgroundColor: 'rgba(255,255,255,' + opacity + ')',
						boxShadow: '0 0 10rpx rgba(200,200,200,' + opacity + ')'
					}
				]">
				<view class="action" @tap="back"><text class="cuIcon-back"></text></view>
				<view class="content tabs"
					:style="[{ top: StatusBar + 'px', height: CustomBar - StatusBar + 'px', lineHeight: CustomBar - StatusBar + 'px' }]"
					v-if="scrollTop > CustomBar">
					<block v-for="(item,index) in tabs" :key="item.title" v-if="index == 0">
						<view class="flex-sub flex justify-center align-center" @tap="changeTab(item)">
							<view class="tab-item" :class="{ active: curTab == item.id }">{{ item.title }}</view>
							<view class="tab-item"> 详情 </view>
						</view>
					</block>
				</view> -->
				<!-- #ifndef MP-WEIXIN -->
				<!-- <view class="share-btn" @tap="openPopup('share')">
					<view style="font-size: 36rpx;">
						<image class="" src="../../static/detail_share.png" />
					</view>
				</view> -->
				<!-- #endif -->
			<!-- </view>
		</view> -->
		<!-- 自定义头部end -->
		<!-- 自定义头部end -->
		<!-- 轮播图start -->
		<view id="banners" class="banners">
			<swiper class="carousel" :indicator-dots="false" :circular="true" @change="changeSwiper">
				<block v-for="(item, index) in swipers" :key="index">
					<!-- 增加了视频播放，暂时未对接接口 swiperVideo ||-->
					<block v-if="index == 0 && swiperVideo ">
						<swiper-item>
							<view class="video-poster">
								<block v-if="!isPlay">
									<image :src="goodsInfo.video_img" mode="aspectFill" lazy-load></image>
									<view class="video-poster-circle" @click="playVideo">
										<!-- <view class="video-poster-mask"></view>
										<view class="cuIcon-playfill"></view> -->
										<!-- <image class="video-icon" src="../../../../static/video-bg.png" /> -->
										<!-- video-icon -->
										<image style="video-icon" class="" src="../../../../static/images/video-bg.png" mode=""></image>
									</view>
								</block>
								<block v-else>
									<video :src="swiperVideo" id="myVideo" style="width:750rpx;height:100%;" controls
										@fullscreenchange="fullscreenchange" @ended="videoEnd"></video>
								</block>
							</view>
						</swiper-item>
					</block>
					<block v-else>
						<swiper-item>
							<image :src="item" mode="aspectFill" lazy-load @click="preview(item, swipers)"></image>
						</swiper-item>
					</block>
					<!-- <swiper-item>
            <view class="image" @click="preview(item, swipers)">
				<fu-image :src="item" mode="aspectFill"></fu-image>
			</view>
          </swiper-item> -->
				</block>
			</swiper>
			<view class="pagination">{{ curSwiper }}/{{ swipers.length }}</view>
		</view>
		<!-- 轮播图end -->
		<!-- 价格展示区start -->
		<view class="prices">
			<view class="titlbox">
				<view class="goodName">{{ goodsInfo.name }}</view>
				<view class="goodprice"><text>￥</text>{{ goodsInfo.price }}</view>
			</view>
			
			<!-- 商品信息 -->
			<view class="infoBox">
				<view class="info_item" v-for="(item,index) in horseInfo" :key="index">
					<text>{{ item[0] }}</text>
					<text>{{ item[1] || "暂无内容"}}</text>
				</view>
			</view>
			<!-- 商家信息 start -->
			<!-- <zhu-store :bg="'#F7F7F7'" :shopInfo="shop_info"></zhu-store> -->
			<!-- 商家信息 end -->
		</view>
		<!-- 价格展示区end -->
		<!-- 猜你喜欢 -->
		<!-- <view class="pttj">
			<view class="title">
				<image src="/static/images/mtindex/pttj.png" mode="aspectFill"></image>
				<text>猜你喜欢</text>
			</view>
			<view class="flex justify-between flex-wrap">
				<ben-goods :width='335' :height='546' :top='30' v-for="(item,index) in asdGoods" :key="index" :goods="item" v-if="index<6"></ben-goods>
			</view>
			
		</view> -->
		<!-- 底部菜单end -->
		<view class="tools">
			<view class="toolbar">
				<view class="btn " @click="promotion">
					<image class="icon" src="../../../../static/images/home.png" mode=""></image>
					推广到首页
				</view>
				<view class="btn edit" @click="editGoods(goods_id)">
					<image class="icon" src="../../../../static/images/edit.png" mode=""></image>
					编辑
				</view>
				<view class="btn del"  @click="delGoods(goods_id)">
					<image class="icon" src="../../../../static/images/del.png" mode=""></image>
					删除
				</view>
			</view>
		</view>
		<!-- 优惠券弹窗-->
		<!-- <fu-coupon-three ref="coupon" :info="coupon_list" @changeInfo="changeInfo"></fu-coupon-three> -->
		<!-- 地址弹窗 -->
		<!-- <fu-goods-address ref="address" :addrs="addrs" @change="changeAddress"></fu-goods-address> -->
		<!-- 分享弹窗 -->
		<!-- <fu-share ref="share" :info="shareInfo" @getPosterInfo="getShareCode"></fu-share> -->
		<!-- 运费说明弹窗 -->
		<!-- <fu-explain :info="freight_explain" :title="i18n['运费说明']" ref="explain"></fu-explain> -->
		<!-- <fu-explain :info="warn" :title="i18n['温馨提示']" ref="warn"></fu-explain> -->
		<!-- 规格弹窗 -->
		<!-- <fu-specs-popup ref="specs" :speclist="spec_list" :skulist="sku_list" :currentId="sku_id" :info="goodsInfo"
			:limit="limit" @changeNumber="setNumber" @changeSpec="setSpec" @addCart="addCart" @buyNow="buyNow">
		</fu-specs-popup> -->
		<!-- <fu-notwork></fu-notwork> -->
	</view>
</template>

<script>
	import richText from '@/common/utils/richText.js';
	import {
		BASE_URL
	} from '@/common/config.js';
	import {
		UPLOAD_VIDEO_URL
	} from '@/common/config.js';
	// import fuSpecsPopup from '../../components/fu-specs-popup/index.vue';
	// import fuCouponThree from '../../components/fu-coupon-three/fu-coupon-three.vue';
	// // import fuExplain from '../../components/fu-explain/index.vue';
	// import fuGoodsAddress from '../../components/fu-goods-address/index.vue';
	// import fuEvaluate from '../../components/fu-evaluate-three/index.vue';
	// import zhuStore from '@/components/zhu-store/zhu-store.vue';// 商家
	export default {
		components: {
			// fuSpecsPopup,
			// fuCouponThree,
			// // fuExplain,
			// fuGoodsAddress,
			// fuEvaluate,
			// zhuStore
		},
		data() {
			return {
				swiperVideo: '',
				curSwiper: 1, // 当前轮播图index
				// tabs: [
				// 	{
				// 		title: global.i18n['商品'],
				// 		id: 'banners'
				// 	},
				// 	{
				// 		title: global.i18n['评论'],
				// 		id: 'evaluates'
				// 	},
				// 	{
				// 		title: global.i18n['详情'],
				// 		id: 'details'
				// 	}
				// ],
				shop_info: {},
				shop_id: '',
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				curTab: 'banners',
				scrollTop: 0, // {Number} 滚动高度
				opacity: 0, //  {Number} 头部透明度
				swipers: [], // {Array.Object} 轮播图
				goodsInfo: {}, // {Object}商品信息
				spec_list: [], // {Array.Object}规格列表
				sku_list: [], // {Array.Object}规格参照列表
				sku_id: 0, // {String}当前规格id
				sku_name: '', //{String}当前规格名称
				goods_id: 0, //{Number}商品id
				cid: '', // {Number}分类id
				body: '', // {String}商品介绍
				comment: [], //{Array.Object}评论列表
				comment_total: 0, //{Number}评论条数
				question_list: [], // 问答列表
				question_total: 0, // 问答条数
				limit: 0, // {Number}限购数量
				addrs: [], // {Array.Object}地址列表
				curAddr: null, //{String}当前选择的地址
				shareCode: '', //{String}分享的图片路径
				shareUrl: '', //{String}分享的地址路径
				coupon_list: [], //{Array.Object}优惠券列表
				isPlay: false, //{Boolean}是否播放
				videoContext: null, //{Object}视频对象
				freight_explain: '', //{String} 运费说明
				explain_title: '', //{String}运费说明标题
				sale_top_name: '', //排行榜
				warn: '', // 温馨提示
				warnTitle: '',
				invite_code: '',
				is_hidden: '1',
				
				horseInfo: [],//轮播下的信息内容
				
				// 猜你喜欢
				//商品列表测试数据
				asdGoods: [
					// {
					// 	id: 1,
					// 	thumb: '/static/images/mtindex/sjImg.jpg',
					// 	name: '加强型纯牛皮软座马鞍游客鞍真皮加强型纯牛皮软座马鞍游客鞍真皮马鞍子整套马鞍子整套',
					// 	store_name: '飞跃马具厂',
					// 	shop_price: '98.89',
					// 	// image: '',
					// },
					// {
					// 	id: 1,
					// 	thumb: '/static/images/mtindex/sjImg.jpg',
					// 	name: '加强型纯牛皮软座马鞍游客鞍真皮马鞍子整套马...',
					// 	store_name: '飞跃马具厂',
					// 	shop_price: '98.89',
					// 	// image: '',
					// },
					// {
					// 	id: 1,
					// 	thumb: '/static/images/mtindex/sjImg.jpg',
					// 	name: '加强型纯牛皮软座马鞍游客鞍真皮马鞍子整套马...',
					// 	store_name: '飞跃马具厂',
					// 	shop_price: '98.89',
					// 	// image: '',
					// }
				],//平台推荐
			};
		},
		filters: {
			filterMobile(val) {
				if (!val) return '';
				return val.substr(0, 3) + '****' + val.substr(-4);
			}
		},
		computed: {
			shareInfo() {
				let name = '';
				if (global.userInfo && (global.userInfo.user_name || global.userInfo.user_nickname)) {
					name = global.userInfo.user_nickname ? global.userInfo.user_nickname : global.userInfo.user_name;
				}
				let invite_code = global.userInfo ? global.userInfo.invite_code : ''
				return {
					goods_id: this.goods_id,
					sku_id: this.sku_id,
					goodsName: this.goodsInfo.name,
					goodsImage: this.swipers[0],
					thumb: this.goodsInfo.thumb,
					summary: this.goodsInfo.description,
					price: this.goodsInfo.price,
					market_price: this.goodsInfo.market_price,
					avatar: (global.userInfo && global.userInfo.head_img) || '',
					name: name,
					href: this.shareUrl || BASE_URL +
						`?goods_id=${this.goods_id}&sku_id=${this.sku_id || 0}&activity_id=${this.activity_id || 0}&invite_code=${invite_code}&type=share`, // H5地址
					code: this.shareCode, // 二维码
					load: false
				};
			},
			cartNumber() {
				return this.$store.getters.allNum;
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onLoad(options) {
			console.log('<<<<<<>>>>>>><<<>>><<>><>><', global.userInfo);
			const {
				goods_id,
				sku_id = 0,
				scene,
				type,
				invite_code
			} = options;
			if (scene) {
				const params = decodeURIComponent(options.scene);
				params.split('&').forEach((item, index) => {
					switch (index) {
						case 0:
							id = item.split('=')[1];
							break;
						case 1:
							activity_id = item.split('=')[1];
							break;
						case 2:
							sku_id = item.split('=')[1];
							break;
						case 3:
							invite_code = item.split('=')[1];
							break;
					}
				});
				type = 'share';
			}
			this.goods_id = goods_id;
			this.sku_id = sku_id;
			if (invite_code) {
				this.invite_code = invite_code;
			}
			if (type) {
				this.openModel = 'share';
			}
			if (global.token) {
				this.loadAddress();
				this.getBusinessSign();
			}
			this.headHeight = Math.round(this.CustomBar + uni.upx2px(88 + 20));
			this.loadData(false);
			this.load = true;


		},

		onUnload() {

			// this.clearPolling();
		},
		onShow() {
			// uni.$on('refreshAddress',this.loadAddress());
			this.is_hidden = global.thirdConfig ? global.thirdConfig.is_hidden : 1;
			if (global.token) {
				this.loadAddress();
			}
			if (!this.load) {
				this.loadData(true);
			} else {
				this.load = false;
			}
		},
		onHide() {
			this.clearPolling();
		},
		onPageScroll(e) {
			let top = Math.round(e.scrollTop);
			// let tab1 = Math.round(this.tabs[1].top);
			// let tab2 = Math.round(this.tabs[2].top);
			let CustomBar = Math.round(this.CustomBar);
			let navH = 115 + this.StatusBar;
			this.scrollTop = top;
			this.opacity = (top / CustomBar).toFixed(2);
			// if (top >= 0 && top < tab1 - navH) {
			// 	this.curTab = 'banners';
			// } else if (top >= tab1 - navH && top < tab2 - navH) {
			// 	this.curTab = 'evaluates';
			// } else if (top >= tab2 - navH) {
			// 	this.curTab = 'details';
			// }
		},
		filters: {
			filterPrice(price) {
				return parseFloat(price);
			}
		},
		onShareAppMessage() {
			return {
				title: this.goodsInfo.name,
				path: `/pages/goods/goodsdetail/goods-detail/index?goods_id=${this.goods_id}&sku_id=${this.sku_id}&type=share`,
				imageUrl: this.goodsInfo.thumb
			};
		},
		methods: {
			promotion() {
				this.$message.info('联系客服，由平台人员在后台设置该商品推荐到首页展示');
			},
			// 编辑商品
			editGoods(id) {
				uni.navigateTo({
					url: '/pages/tab/management/addGoods/index?id=' + id
				});
			},
			delGoods(item) {
				const that = this;
				this.$util.showModal({
					title: '提示',
					content: '确定删除商品',
					confirmColor: that.$store.state.themeColor,
					success: function(res) {
						if (res.confirm) {
							that.$api.post(global.apiUrls.delGoods, {
								id: item
							}).then(res => {
								if (res.data.code == 1) {
									that.$message.info('删除成功');
									uni.redirectTo({
										url: '/pages/tab/management/management/index'
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 智能推荐商品详情
			getBusinessSign() {
				this.$api.post(global.apiUrls.postRecommentGoods,{
						businessSign: 'goodsDetail',
						page: 1,
						list_rows: 10,
						// weight: 3,
					})
					.then(res => {
						console.log('智能推荐首页', res.data);
						if (res.data.code == 1) {
							this.asdGoods = res.data.data.goods_list;
						}
					})
					.catch(err => {
						console.log('智能推荐首页ERROR: ', err);
					});
			},
			changeEvaluate(val, index) {
				console.log(val, index);
				this.comment[index].is_likes = val.is_likes;
			},
			// 去店铺
			goMerchant(item) {
				this.$urouter.navigateTo({
					url: '/pages/goods/shop/shop/index',
					params: {
						partner_id: item.u_id
					}
				});
			},
			/**
			 * @event
			 * @description  改变优惠券领取状态
			 * @param {Number} val - 是否领取
			 * @return {Boolean}
			 * */
			changeInfo(val) {
				this.coupon_list[val].is_receive = 1;
			},
			navToQuestionsAnswers() {
				this.$util.actionAuth(() => {
					this.$urouter.navigateTo({
						url: '/pages/goods/ask-answer/ask-answer-list/index',
						params: {
							goods_id: this.goods_id,
							activity_id: this.activity_id || 0
						}
					});
				});
			},
			/**
			 * @event
			 * @description  播放视频监听
			 * */
			playVideo() {
				this.isPlay = true;
				let that = this;
				setTimeout(() => {
					that.videoContext.requestFullScreen(0);
					that.videoContext.play();
				}, 200);
			},
			/**
			 * @event
			 * @description  视频结束监听
			 * */
			videoEnd(e) {
				this.videoContext.exitFullScreen();
				this.isPlay = false;
			},
			/**
			 * @event
			 * @description  视频全屏监听
			 * */
			fullscreenchange(e) {
				console.log(e);
				// 退出全屏时
				if (!e.detail.fullScreen) {
					this.isPlay = false;
					this.videoContext.pause();
				}
			},

			goRank() {
				this.$urouter.navigateTo({
					url: '/pages/rank/product-rank/rank-detail/index',
					params: {
						goods_id: this.goods_id,
						cid: this.cid
					}
				});
			},
			/**
			 * @event
			 * @description  获取跑马灯数据(暂时用不着)
			 * */
			getLamp() {
				this.timer = setInterval(this.polling, 6000);
				clearTimeout(this.outTimer);
			},
			/**
			 * @event
			 * @description  清除跑马灯轮(暂时用不着)
			 * */
			clearPolling() {
				clearInterval(this.timer);
				clearTimeout(this.outTimer);
			},
			polling() {
				this.outTimer = setTimeout(() => {
					this.lampInfo = null;
				}, 3000);
				this.$api
					.post(global.apiUrls.getGoodsLampList, {
						goods_id: this.goods_id
					})
					.then(res => {
						if (res.data.code == 1 && res.data.data) {
							this.lampInfo = res.data.data;
						}
						// console.log('跑马灯数据', res);
					});
			},
			/**
			 * @event
			 * @description  弹出领取优惠券弹窗
			 * */
			switchCoupon() {
				this.$util.actionAuth(() => {
					this.openPopup('coupon');
				});
			},
			/**
			 * @event
			 * @description  点击图片放大
			 * @param {String} item 当前图片url
			 * @param {Array} urls 图片url
			 */
			preview(item, urls) {
				uni.previewImage({
					current: item,
					urls: urls
				});
			},
			// 返回
			back() {
				if (this.openModel == 'share') {
					uni.reLaunch({
						url: '/pages/tab/home/shopindex/index'
					});
				} else {
					uni.navigateBack();
				}
			},
			// 轮播图切换
			changeSwiper(e) {
				this.curSwiper = e.detail.current + 1;
			},
			/**
			 * @event
			 * @description 获取收货地址列表
			 * @return {Array}
			 */
			loadAddress() {
				// this.$api.post(global.apiUrls.getUserAddressAddressList).then(res => {
				// 	if (res.data.code == 1) {
				// 		this.addrs = res.data.data;
				// 	}
				// });
			},
			/**
			 * @event
			 * @description tab栏切换
			 * @return {Array}
			 */
			changeTab(item) {
				this.curTab = item.id;
				let nowScrollTop = this.scrollTop;
				uni.createSelectorQuery()
					.in(this)
					.select('.' + item.id)
					.boundingClientRect(pos => {
						let posTop = Math.round(pos.top);
						if (posTop == 0 && nowScrollTop != 0) return;
						uni.pageScrollTo({
							duration: 0,
							scrollTop: posTop + nowScrollTop - 105 - this.StatusBar
						});
					})
					.exec();
			},
			/**
			 * @event
			 * @description  点击打开弹窗
			 * @param {String} type
			 * @param {Array} param
			 */
			openPopup(type, param) {
				this.$refs[type].open(param);
			},
			/**
			 * @event
			 * @description  获取商品详情
			 * @param {String} goods_id 商品id
			 * @param {Array} user_id 用户id
			 * @return {Object}
			 */
			loadData(isUpdata) {
				this.$api.get(global.apiUrls.getGoodsDetail, {
						goods_id: this.goods_id,
						// user_id: (global.userInfo && global.userInfo.id) || 0
					})
					.then(res => {
						if (res.data.code == 1) {
							console.log('goods detail', res.data.data);
							let data = res.data.data;
							this.getClass()
							if (!isUpdata) {
								this.swipers = data.images;
								// 首个视频处理  _img
								if (data.video) {
									this.swipers.unshift(data.video_img);
									this.swiperVideo = data.video;
								}
								this.goodsInfo = {
									adslogan: data.adslogan,
									name: data.name,
									price: data.shop_price,
									market_price: data.market_price,
									discounts: data.discounts || 0.0,
									thumb: data.thumb,
									description: data.description,
									is_collect: data.is_collect,
									share_award_money: data.share_award_money || 0.0,
									number: 1,
									stock: data.stock || 0,
									totalStock: data.stock || 0,
									sales_sum: data.sales_sum,
									is_spec: data.is_spec,
									goods_label: data.goods_label,
									goods_label_activity: data.goods_label_activity,
									goods_label_service: data.goods_label_service,
									praise_rate: data.praise_rate,
									is_shipping: data.is_shipping,
									member_price: data.member_price,
									shop_price: data.shop_price,
									run_type: data.run_type,
									video_img: data.video_img
								};
								
								// 处理分类1马匹 6马具 12马粮  详情信息
								let objInfo = {};
								// console.log(data.birthday, 'data.classify')
								if(data.classify == 1) {//分类 1马匹 2马具 3马粮
								//brand_name
									objInfo['品种'] = data.cid_name;//品种
									objInfo['性别'] = data.sex == 1 ? '公马' : '母马';//性别
									objInfo['用途'] = data.used;//用途
									objInfo['颜色'] = data.colour;//颜色
									objInfo['年龄'] = data.birthday;//生日  年龄birthday
									// objInfo['年龄'] = data.age;//年龄
									objInfo['身高'] = data.height;//身高
									objInfo['体重'] = data.weight_body;//体重
									if(data.spec_list[0]) {
										let text = data.spec_list[0].spec_value.map(item => {
											return item.item
										})
										objInfo['规格'] = text.toString()
									} else {
										objInfo['规格'] = ''
									}
									objInfo['描述'] = data.describe || data.adslogan;//描述
								}else if(data.classify == 3){
									// '马具' /
									objInfo['分类'] = data.cid_name;
									objInfo['类型'] = data.types;
									objInfo['品牌'] = data.brand_name;//-----
									objInfo['产地'] = data.producing_area;
									// objInfo['规格'] = data.birthday;
									if(data.spec_list[0]) {
										let text = data.spec_list[0].spec_value.map(item => {
											return item.item
										})
										objInfo['规格'] = text.toString()
									} else {
										objInfo['规格'] = ''
									}
									// let text = data.spec_list[0].spec_value.map(item => {
									// 	// console.log(item, 'iii')
									// 	return item.item
									// })
									// objInfo['规格'] = text.toString()
									objInfo['适用'] = data.suit;
									objInfo['描述'] = data.describe;
								}else if(data.classify == 2){
									objInfo['分类'] = '马粮';
									objInfo['品牌'] = data.brand_name;//-----
									objInfo['产地'] = data.producing_area;
									if(data.spec_list[0]) {
										let text = data.spec_list[0].spec_value.map(item => {
											// console.log(item, 'iii')
											return item.item
										})
										objInfo['规格'] = text.toString()
									} else {
										objInfo['规格'] = ''
									}
									// objInfo['规格'] = text.toString()
									objInfo['适用'] = data.suit;
									// objInfo['描述'] = data.describe;
									
								}
								this.horseInfo = this.objectTo2DArray(objInfo);//转换为二位数组---商品轮播下面的信息
								
								if (data.freight_explain) {
									this.freight_explain = data.freight_explain.replace(/\n/g, '<br/>');
								}
								if (data.warm_prompt) {
									this.warnTitle = data.warm_prompt;
									this.warn = data.warm_prompt.replace(/\n/g, '<br/>');
								}
								this.shop_id = data.shop_info.id;
								this.explain_title = data.freight_name;
								this.coupon_list = data.coupon_list || [];
								this.cid = data.cid;
								this.sale_top_name = data.sale_top_name;
								this.totalStock = data.stock;
								this.limit = data.limit || 0;
								// console.log(data.body);
								this.body = data.body ? richText.format(data.body) : '';
								this.comment = data.comment || [];
								this.comment_total = data.comment_total || 0;
								this.question_total = data.question_total || 0;
								this.question_list = data.question_list;
								this.shop_info = data.shop_info || {};
								// console.log(this.sku_list);
								if (data.is_spec == 1) {
									this.spec_list = data.spec_list.filter(item => item.spec_value.length != 0);
									this.sku_list = Object.values(data.sku_list).map(item => {
										item.sku_spec = item.key.split('_');
										return item;
									});
								}
								uni.stopPullDownRefresh();
								this.$nextTick(() => {
									if (data.is_spec == 1) {
										setTimeout(() => {
											// this.$refs.specs.init();
										}, 100);
									}
								});
								// setTimeout(() => {
								// 	this.computedPosTop();
								// }, 500);
							}
							// onshow时只更新评论与问答
							if (isUpdata) {
								console.log('我需要更新了');
								this.comment = data.comment || [];
								this.comment_total = data.comment_total || 0;
								this.question_total = data.question_total || 0;
								this.question_list = data.question_list;
								this.coupon_list = data.coupon_list;
								this.goodsInfo.is_collect = data.is_collect;
								this.coupon_list = data.coupon_list;
								this.goodsInfo.is_collect = data.is_collect;
								this.shop_info = data.shop_info || {};
								this.$store.dispatch('getCartList');
							}
						} else {
							uni.navigateBack();
							setTimeout(() => {
								this.$message.info(res.data.msg);
							}, 800);
						}
					});
			},
			/**
			 * @event
			 * @description  商品分类、性别 颜色 用途等
			 */
			getClass() {
				// 获取类型商品分类、性别 颜色 用途等
				this.$api
					.post(global.apiUrls.getDataCat)
					.then(res => {
						if (res.data.code == 1) {
							let arr = res.data.data;
							arr.forEach((item, index) => {
								item.ischecked = false;
							});
							arr[0].ischecked = true;
							this.atype = arr;
						}
					})
					.catch(err => {
						console.log('err: ' + JSON.stringify(err));
					});
			},
			/**
			 * @event
			 * @description  对象转换为二维数组
			 */
			objectTo2DArray(obj) {
			  let keys = Object.keys(obj);
			  let values = Object.values(obj);
			  let twoDArray = [];
			  
			  for (let i = 0; i < keys.length; i++) {
			    twoDArray.push([keys[i], values[i]]);
			  }
			  
			  return twoDArray;
			},
			/**
			 * @event
			 * @description  计算锚点位置
			 */
			computedPosTop() {
				const query = uni.createSelectorQuery().in(this);
				this.tabs.forEach((item, index) => {
					query
						.select('#' + item.id)
						.boundingClientRect(data => {
							this.$set(this.tabs[index], 'top', data.top);
						})
						.exec();
				});
			},
			/**
			 * @event
			 * @description  收藏
			 * @param {String} collect_id 商品id
			 * @param {Array} sku_id 规格id
			 * @param {Array} collect_title 商品名称
			 * @param {Array} type 类型
			 * @return {Object}
			 */
			collect() {
				this.$util.actionAuth(() => {
					this.$api
						.post(global.apiUrls.postGoodsCollection, {
							collect_id: this.goods_id,
							sku_id: this.sku_id,
							collect_title: this.goodsInfo.name,
							type: 1
						})
						.then(res => {
							if (res.data.code == 1) {
								console.log('collect', res.data);
								if (this.goodsInfo.is_collect) {
									this.goodsInfo.is_collect = 0;
								} else {
									this.goodsInfo.is_collect = 1;
								}
								this.$message.info(res.data.msg);
							}
						});
				});
			},
			/**
			 * @event
			 * @description  修改购买数量
			 * @return {String}
			 */
			setNumber(num) {
				this.goodsInfo.number = num;
			},
			/**
			 * @event
			 * @description  修改购买规格
			 * @param {Object} skuInfo
			 * @return {Object}
			 */
			setSpec(skuInfo) {
				const {
					key_name,
					shop_price,
					market_price,
					sku_id,
					stock,
					member_price,
					thumb
				} = skuInfo;
				console.log('skuInfo', skuInfo);
				this.sku_id = sku_id;
				this.sku_name = key_name;
				this.goodsInfo.price = shop_price;
				this.goodsInfo.market_price = market_price;
				this.goodsInfo.member_price = member_price;
				this.goodsInfo.stock = stock;
				thumb && (this.goodsInfo.thumb = thumb);
				this.goodsInfo.shop_price = shop_price;
			},
			/**
			 * @event
			 * @description  立即购买
			 * @param {Number} goods_id 商品id
			 * @param {String} number 商品数量
			 * @param {String} type 类型
			 */
			buyNow() {
				this.$util.actionAuth(() => {
					if (this.goodsInfo.stock == 0) return this.$message.info(this.i18n['该商品暂无库存']);
					let data = {
						type: 'buy',
						goods_id: this.goods_id,
						number: this.goodsInfo.number
					};
					if (this.sku_id) {
						data.sku_id = this.sku_id;
					}
					if (this.curAddr) {
						data.address_id = this.curAddr.address_id;
					}
					if (this.invite_code) {
						data.invite_code = this.invite_code
					}
					data.invite_code = this.invite_code
					this.$urouter.navigateTo({
						url: '/pages/order/order-process/confirm-order/index',
						params: data
					});
				});
			},
			/**
			 * @event
			 * @description  加入购物车
			 * @param {Number} goods_id 商品id
			 * @param {Number} num 商品数量
			 * @return {Object}
			 */
			addCart() {
				console.log(111);
				this.$util.actionAuth(() => {
					const data = {
						num: this.goodsInfo.number,
						goods_id: this.goods_id,
						partner_id: this.shop_info.u_id || 0
					};
					if (this.sku_id) {
						data.sku_id = this.sku_id;
					}
					// this.$api.post(global.apiUrls.postGoodsAddToCart, data).then(res => {
					// 	if (res.data.code == 1) {
					// 		console.log(res.data);
					// 		this.$message.info(this.i18n['加入购物车成功']);
					// 		this.$store.dispatch('getCartList');
					// 		uni.$emit('updateCart');
					// 	} else {
					// 		this.$message.info(res.data.msg);
					// 	}
					// });
				});
			},
			/**
			 * @event
			 * @description  选择地址
			 */
			switchAddress() {
				this.$util.actionAuth(() => {
					this.openPopup('address');
				});
			},
			/**
			 * @event
			 * @description  打开运费弹窗
			 */
			switchFreight() {
				this.openPopup('explain');
			},
			/**
			 * @event
			 * @description  打开温馨提示
			 */
			switchWarn() {
				this.openPopup('warn');
			},
			/**
			 * @event
			 * @description  去评价列表
			 * @param {Number} goods_id 商品id
			 */
			navToComment() {
				if (this.comment_total == 0) return this.$message.info(this.i18n['该商品暂无评论']);
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-comment/index',
					params: {
						goods_id: this.goods_id
					}
				});
			},
			/**
			 * @event
			 * @description  改变收货地址
			 */
			changeAddress(e) {
				this.curAddr = e;
				this.$refs.address.close();
			},
			/**
			 * @event
			 * @description 去购物车
			 */
			navToCart() {
				this.$util.actionAuth(() => {
					this.$urouter.navigateTo({
						url: '/pages/tabbar/cart-page/index',
					});
				})
			},
			/**
			 * @event
			 * @description  客服
			 */
			navToServer() {
				this.$util.actionAuth(() => {
					this.$urouter.navigateTo({
						url: '/pages/service-message/service/service-detail/index',
						params: {
							kid: this.shop_info.member_id,
							partner_id: this.shop_info.member_id,
							goods_id: this.goods_id,
							activity_id: this.activity_id || 0
						}
					});
				});
			},
			/**
			 * @event
			 * @description  获取二维码
			 * @param {Number} goods_id 商品id
			 * @param {Number} activity_id 活动id
			 * @param {Number} sku_id 规格id
			 */
			getShareCode() {
				// #ifdef MP-WEIXIN
				let data = {
					a: this.goods_id,
					b: this.activity_id || 0,
					c: this.sku_id || 0
				};
				console.log('我分享的参数', data);
				let dataStr = this.$util.serialize(data);
				let page = 'pages/goods/goodsdetail/goods-detail/index';
				this.$api
					.post(global.apiUrls.postShareCode, {
						page: page,
						scene: dataStr,
						width: 180
					})
					.then(res => {
						console.log('分享二维码', res);
						if (res.data.code == 1) {
							let data = res.data.data.base64;
							this.$util
								.base64ToPath(data)
								.then(res => {
									console.log('图片临时路径', res);
									this.shareCode = res;
									this.$refs.share.init();
								})
								.catch(err => {
									console.log('保存临时二维码失败', err);
									this.$message.info(this.i18n['保存临时二维码失败']);
								});
						} else {
							this.$message.info(this.i18n['获取分享二维码失败']);
						}
					})
					.catch(err => {
						console.log('获取分享二维码失败', err);
					});
				// #endif
				// #ifndef MP-WEIXIN
				this.$api
					.post(global.apiUrls.postAppShareCode, {
						goods_id: this.goods_id,
						activity_id: this.activity_id || 0,
						sku_id: this.sku_id || 0
					})
					.then(res => {
						let data = res.data;
						console.log('App fen xiang ', data);
						if (data.code == 1) {
							let url = data.data.qrcode_url;
							let href = data.data.url;
							console.log('二维码路径', url);
							this.shareCode = url;
							this.shareUrl = href;
							this.$refs.share.init();
						} else {
							this.$message.info(this.i18n['获取分享二维码失败']);
						}
					})
					.catch(err => {
						console.log(err);
					});
				// #endif
			}
		},
		onPullDownRefresh() {
			this.loadData(false);
			this.$refs.guess && this.$refs.guess.refresh();

			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(e) {
			this.$refs.guess && this.$refs.guess.loadData();
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100%;
		padding-bottom: 100rpx;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.banners {
		height: 750rpx;
		position: relative;

		.carousel {
			width: 100%;
			height: 100%;

			.image {
				width: 100%;
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.pagination {
			width: 80rpx;
			height: 40rpx;
			border-radius: 40rpx;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			right: 32rpx;
			bottom: 32rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			text-align: center;
			color: rgba(255, 255, 255, 0.8);
		}
	}

	.video-poster {
		height: 100%;
		position: relative;
		font-size: 40rpx;
		color: #ffffff;

		#myVideo {
			width: 750rpx;
			height: 100%;
		}

		.video-poster-circle {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			border: 1rpx solid #ffffff;
			z-index: 99;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;

			.video-poster-mask {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: -1;
			}
		}
	}
	
	.pttj{
		margin-top: 20rpx;
		padding: 0 30rpx;
		
		.title{
			position: relative;
			height: 92rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			image{
				width: 240rpx;
				height: 20rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			text{
				font-size: 32rpx;
				color: #000000;
			}
		}
	}

	.prices {
		// height: 112rpx;
		background-color: #ffffff;
		padding: 30rpx 0rpx 22rpx;
		border-radius: 30rpx 30rpx 0px 0px;
		margin-top: -30rpx;
		position: relative;
		z-index: 333;
		
		.infoBox{
			background-color: #F7F7F7;
			padding: 30rpx 0 0 40rpx;
			border-radius: 20rpx;
			margin: 0 30rpx;
			
			.info_item{
				padding-bottom: 30rpx;
				display: flex;
				
				text:nth-of-type(1){
					flex-shrink: 0;
				}
				
				text{
					font-size: 28rpx;
					color: #4D4D4D;
					margin-right: 40rpx;
				}
				
				view{
					font-size: 28rpx;
					color: #0D0D0D;
				}
			}
		}
		
		.titlbox {
			margin: 0 30rpx;
			
			.goodName{
				font-size: 32rpx;
				color: #000000;
			}
			
			.goodprice{
				padding: 20rpx 0 50rpx;
				font-size: 46rpx;
				color: #FE4939;
				
				text{
					font-size: 30rpx;
				}
			}
		}
	}

	.sale-mark {
		padding: 4rpx 10rpx;
		margin-right: 10rpx;
		height: 32rpx;
		background: rgba(255, 239, 239, 1);
		border-radius: 4px;
		color: $theme;
		font-size: 24rpx;
		text-align: center;
		width: 84rpx;
	}

	.infos {
		border-radius: 0;
	}

	.list-item {
		height: 112rpx;
		line-height: 112rpx;
		display: flex;

		.title {
			width: 100rpx;
			min-width: 100rpx;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
		}

		.content {
			flex: 1;
			display: flex;
			justify-content: space-between;
			overflow: hidden;

			.mes {
				flex: 1;
				position: relative;
			}

			.icon {
				/* width: 50rpx;
      min-width: 50rpx; */
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.coupon-icon {
				width: 30rpx;
				min-width: 30rpx;
			}

			.freight-text {
				text-align: right;
			}
		}
	}

	.title-color {
		position: relative;
		padding-left: 10rpx;
	}

	.title-color::before {
		display: inline-block;
		position: absolute;
		content: '';
		height: 30rpx;
		width: 6rpx;
		background: $bgtheme;
		left: 20rpx;
		top: 34rpx;
	}

	.evaluates {
		.title {
			height: 100rpx;

			.title-color::before {
				left: -4rpx;
				top: 10rpx;
			}
		}
	}

	.shopinfos {
		.title {
			height: 260rpx;
			background-repeat: no-repeat;
			background-size: cover;
			padding: 30rpx;
			border-radius: 20rpx 20rpx 0 0;

			.tag {
				padding: 5rpx 10rpx;
				font-size: 16rpx;
				background-color: rgba(255, 0, 0, 0.6);
				border-radius: 100rpx;
				color: #ffffff;
			}

			.tag+.tag {
				margin-left: 10rpx;
			}

			.action {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 60rpx;
				background-color: rgba(0, 0, 255, 0.3);
				color: #ffffff;
				font-size: 24rpx;
			}
		}

		.recommend {
			.wrap {
				width: 100%;

				.list {
					display: flex;
					align-props: flex-start;

					.goods-item+.goods-item {
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.details {
		.title {
			height: 100rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
			line-height: 100rpx;

			.title-color::before {
				left: -4rpx;
				// top: 10rpx;
			}
		}
	}

	.title2 {
		width: 150rpx;
		min-width: 150rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.tools {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-top: 10rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #ffffff;
		/* box-shadow: 0px -1px 0px #eeeeee; */
		z-index: 999;

		.toolbar {
			height: 100rpx;
			
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			.btn {
				display: flex;
				justify-content: center;
				// padding: 0 16rpx;
				// padding-left: 16rpx;
				align-items: center;
				width: 210rpx;
				height: 80rpx;
				border: 1rpx solid #4D4D4D;
				border-radius: 40rpx;
				color: #000;
				font-size: 28rpx;
				.icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}
			.edit {
				color: #4E8CEE;
				border-color: #4E8CEE;
			}
			.del {
				color: #FC616B;
				border-color: #FC616B;
			}
			.left {
				flex: 1;
				padding-left: 28rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 272rpx;

				.left-item {
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
					color: #666;
					align-items: center;
					position: relative;
					
					.cuIcon-favorfill{
						color: #FB9510;
					}

					.tag {
						position: absolute;
						top: -10rpx;
						right: -18rpx;
						background: $bgtheme;
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						font-size: 20rpx;
						color: #ffffff;
						line-height: 36rpx;
						text-align: center;
					}
				}
			}

			.right {
				/* display: flex;
      align-items: center;
      justify-content: space-between;*/
				padding: 0 20rpx 0 20rpx;
				width: 440rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				.btn {
					width: 50%;
					height: 80rpx;
					text-align: center;
					color: #ffffff;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					// line-height: 1.3;
				}

				.btn1 {
					background: linear-gradient( 180deg, #FFB24B 0%, #FB9510 100%);
					border-radius: 40rpx 0 0 40rpx;
				}

				.btn2 {
					background: linear-gradient( 180deg, #FF7C78 0%, #FE403A 100%);
					border-radius: 0 40rpx 40rpx 0;
				}
			}
		}
	}

	.block-30 {
		width: 30rpx;
		height: 28rpx;
	}

	.block-32 {
		width: 44rpx;
		height: 44rpx;
	}

	.radius-20 {
		border-radius: 20rpx;
	}

	.block-48 {
		width: 48rpx;
		height: 48rpx;
		font-size: 46rpx;
		color: #4D4D4D;
		font-weight: bold;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.block-90 {
		width: 90rpx;
		height: 90rpx;
		min-width: 90rpx;
		min-height: 90rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.block-220 {
		width: 220rpx;
		height: 220rpx;
		min-width: 220rpx;
		min-height: 220rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.text-through {
		text-decoration: line-through;
	}

	.word-break-all {
		word-break: break-all;
	}

	.text-999 {
		color: #999999;
	}

	.item-goods-label {
		background-image: linear-gradient(to right, #ff9700, #ed1c24);
		padding: 2rpx 5rpx;
		color: #ffffff;
		font-size: 24rpx;
		border-radius: 6rpx;
		margin-right: 9rpx;
	}

	.item-activity-label {
		padding: 2rpx 5rpx;
		/* margin: 5rpx; */
		font-size: 24rpx;
		border-radius: 6rpx;
		border: 1px solid;
		margin: 0rpx 1px 0px;
		display: inline-block;
		transform: scale(0.8);
	}

	.item-goods-service-label {
		padding: 2rpx;
		margin: 3rpx;
		display: inline-block;
	}

	.evaluates-service {
		padding: 10rpx 0;
		color: #999999;
	}

	.service-icon {
		font-size: 24rpx;
		margin-right: 8rpx;
		color: $theme;
		margin-left: 18rpx;
	}

	.item-goods-service-label:first-child .service-icon {
		margin-left: 0rpx;
	}

	.lamp {
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		z-index: 9999;
		top: 150rpx;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		margin: 0 10rpx;
		border-radius: 10rpx;
		padding: 2rpx 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background: #fff;
			margin-right: 10rpx;
		}

		.text {
			margin-right: 10rpx;
		}
	}

	.title-top {
		width: 140rpx !important;

		.text-top {
			margin-right: 10rpx;
			font-size: 24rpx;
		}
	}

	.discounts-info {
		color: $theme;
		font-size: 22rpx;
		border-radius: 6rpx;
		padding: 8rpx 16upx;
		// background-image: url('../../static/detail_coupon_bg.png');
		background-size: 100% 100%;
		margin-right: 16rpx;
	}

	.discounts-info:first-child {
		margin-left: 0;
	}

	.activity-info {
		color: $theme;
		font-size: 24rpx;
		border-radius: 6rpx;
		padding: 4rpx;
		background: #fce4eb;
	}

	.questionAnswers {
		padding: 10rpx 0;
	}

	.questionAnswers:last-child {
		padding-bottom: 20rpx;
	}

	.questionAnswers-left {
		font-size: 28rpx;
		color: #333333;
		width: 85%;
		/* top: 2rpx; */
		position: relative;

		image {
			position: absolute;
			/* top:50%; */
		}

		text {
			margin-left: 50rpx;
		}
	}

	.questionAnswers-right {
		font-size: 24rpx;
		color: #999999;
	}

	.questionAnswers-list .image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.share-btn {
		padding-right: 26rpx;
	}

	.share-btn image {
		width: 55rpx;
		height: 55rpx;
	}

	.cuIcon-back {
		font-size: 26rpx;
		color: #000;
	}

	.tabs {
		width: 100%;
		display: flex;
		pointer-events: all;

		.tab-item {
			height: 100%;
			font-size: 36rpx;
			color: #000;
			border-bottom: 4rpx solid white;
		}

		.tab-item.active {
			color: #333333;
			font-size: 32rpx;
			border-bottom-color: $fu-main-color;
		}
	}

	.margin-top-10 {
		margin-top: 10rpx;
	}

	.address-icon {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		margin-top: -16rpx;
		top: 50%;
		margin-right: 4rpx;
	}

	.margin-left-province {
		margin-left: 40rpx;
	}

	.video-icon {
		width: 80rpx;
		height: 80rpx;
	}

	.line-height {
		line-height: 1.5;
	}

	.collect-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.merchant-info {
		padding: 26rpx 0;

		.left {
			.merchant-img {
				width: 100rpx;
				height: 100rpx;
			}

			.merchant-text {
				margin-left: 24rpx;
				width: 420rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.m-title {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
				}
			}
		}

		.right {
			display: flex;
			align-items: center;

			text {
				background: $bgtheme;
				width: 130rpx;
				text-align: center;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 8rpx;
				color: #FFFFFF;
			}
		}
	}
</style>